import { FC, ReactElement, useEffect, useState } from 'react'
import {
  connect,
  Dispatch,
  IndicatorListType,
  IndicatorModelState,
  Location
} from 'umi'
import type { ColumnsType } from 'antd/es/table'
import { Table, Card, Button, Space, Modal, message } from 'antd'
import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons'
import AddItem from './components/add'
import EditItem from './components/edit'
import styles from './index.less'
interface IProps {
  dispatch: Dispatch
  indicatorModel: IndicatorModelState
  location: Location
}
const { confirm } = Modal

const IndicatorDetail: FC<IProps> = ({
  dispatch,
  indicatorModel,
  location
}): ReactElement => {
  const { ruleCode } = location.query as { ruleCode: string }
  const { indicatorDetail } = indicatorModel
  const [addShow, setAddShow] = useState<boolean>(false)
  const [editShow, setEditShow] = useState<boolean>(false)
  const [pageNum, setPageNum] = useState<number>(1)
  const [pageSize, setPageSize] = useState<number>(10)
  const [total, setTotal] = useState<number>(0)
  const [record, setRecord] = useState<any>({})

  const paginationProps = {
    current: pageNum, //当前页码
    pageSize, // 每页数据条数
    showTotal: () => <span>总共{total}项</span>,
    total, // 总条数
    onChange: (page: number, pageSize: number) =>
      handlePageChange(page, pageSize), //改变页码的函数
    hideOnSinglePage: false,
    showSizeChanger: false
  }

  const handlePageChange = (page: number, pageSize: number) => {
    setPageNum(page)
    setPageSize(pageSize)
  }

  const handleDel = (code: string) => {
    confirm({
      title: '删除',
      icon: <ExclamationCircleOutlined />,
      content: '确定删除该指标项吗?',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        dispatch({
          type: 'indicatorModel/function_deleteRuleItemInfo',
          payload: {
            criteriaCode: ruleCode,
            code
          },
          callback: (response) => {
            if (response.code === 200) {
              message.success('删除成功')
              getIndicatorDetail(ruleCode)
            }
          }
        })
      }
    })
  }

  const columns: ColumnsType<IndicatorListType> = [
    {
      title: '指标号',
      dataIndex: 'title',
      key: 'title',
      align: 'center',
      width: '150px'
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      align: 'left'
    },
    {
      title: '分数',
      dataIndex: 'point',
      key: 'point',
      align: 'center',
      width: '100px'
    },
    {
      title: '评价方式',
      dataIndex: 'type',
      key: 'type',
      align: 'center'
    },
    {
      title: '评价主体',
      dataIndex: 'body',
      key: 'body',
      align: 'center'
    },
    {
      title: '评价依据',
      dataIndex: 'source',
      key: 'source',
      align: 'left'
    },
    {
      title: '操作',
      dataIndex: 'source',
      key: 'source',
      align: 'center',
      render: (_: string, record: any) => {
        return (
          <Space size="middle">
            <Button type="primary" onClick={() => handleAdd(record)}>
              新增
            </Button>
            <Button type="primary" onClick={() => handleEdit(record)}>
              修改
            </Button>
            <Button
              type="primary"
              danger
              onClick={() => handleDel(record.code)}
            >
              删除
            </Button>
          </Space>
        )
      }
    }
  ]

  // 获取指标详情
  const getIndicatorDetail = (ruleCode?: string) => {
    dispatch({
      type: 'indicatorModel/function_getRuleItemInfo',
      payload: { ruleCode }
    })
  }

  // 添加指标项
  const handleAdd = (record: any) => {
    setRecord(record)
    setAddShow(true)
  }

  // 修改指标项
  const handleEdit = (record: any) => {
    setRecord(record)
    setEditShow(true)
  }

  useEffect(() => {
    getIndicatorDetail(ruleCode)
  }, [])

  useEffect(() => {
    setTotal(indicatorDetail.length)
  }, [indicatorDetail])

  return (
    <div className={styles.container}>
      <Card
        title={
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => handleAdd({})}
          >
            添加指标项
          </Button>
        }
      >
        <Table
          dataSource={indicatorDetail}
          columns={columns}
          rowKey="code"
          pagination={paginationProps}
        />

        {/* 新增指标项 */}
        <AddItem
          visible={addShow}
          hide={() => {
            setAddShow(false)
          }}
          update={() => {
            getIndicatorDetail(ruleCode)
          }}
          record={record}
        />

        <EditItem
          visible={editShow}
          hide={() => {
            setEditShow(false)
          }}
          update={() => {
            getIndicatorDetail(ruleCode)
          }}
          record={record}
        />
      </Card>
    </div>
  )
}

const mapStateToProps = ({
  indicatorModel
}: {
  indicatorModel: IndicatorModelState
}) => {
  return {
    indicatorModel
  }
}
export default connect(mapStateToProps)(IndicatorDetail)
